<%--
  Created by IntelliJ IDEA.
  User: Baggio
  Date: 2017-11-22
  Time: 14:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>支付</title>
    <%@ include file="/common/include-core.jsp" %>
    <%@ include file="/common/include-web.jsp" %>
    <link rel="stylesheet" type="text/css" href="/static/css/web/pay/pay.css"/>

    <script src=" http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript">
        /* alert(location.href.split('#')[0]);*/
        wx.config({
            debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId : '${wxPayData.appId}', // 必填，公众号的唯一标识
            timestamp : '${wxPayData.wxConfigTimeStamp}', // 必填，生成签名的时间戳
            nonceStr : '${wxPayData.wxConfigNonceStr}', // 必填，生成签名的随机串
            signature : '${wxPayData.Signature}',// 必填，签名，见附录1
            jsApiList : [ 'chooseWXPay' ],
            success : function(res) {
                // 支付成功后的回调函数c
                //   alert("succJSON====>" + JSON.stringify(res));
            },
            fail : function(msg) {
                //   alert("fail-=>"+JSON.stringify(msg));
            }
            // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function() {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            callpay();
        });
        wx.error(function(res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            //   alert("erro==>"+JSON.stringify(res));
        });
        //  callpay();
        function callpay() {
            wx.chooseWXPay({
                "appId" : "${wxPayData.appId}",//appid
                "timestamp" : "${wxPayData.wxJsApiParamTimeStamp}", //时间戳，自1970年以来的秒数
                "nonceStr" : "${wxPayData.wxJsApiParamNonceStr}", //随机串
                "package" : "${wxPayData.PackAge}",
                "signType" : "MD5", //微信签名方式：
                "paySign" : "${wxPayData.PaySign}", //微信签名

                success : function(res) {
                    // 支付成功后的回调函数c
                    // alert(JSON.stringify(msg));
                    alert("支付成功！");
                    window.location.href = "/wechat_pay/paySuccess";
                },
                fail : function(msg) {
                    alert("pay eerro");
                    // alert(JSON.stringify(msg));
                }
            });
        }

        function checkJsApi() {

            wx.checkJsApi({
                jsApiList : [ 'chooseImage', 'chooseWXPay' ],// 需要检测的JS接口列表，所有JS接口列表见附录2,
                success : function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    alert(JSON.stringify(res));
                }
            });
        }

    </script>
</head>
<body>



<%--首页头--%>
<jsp:include page="${ctx}/include/include-head.html"/>
<input type="hidden" value="${user.tid}" id="userId" name="userId">
<input type="hidden" value="${order.orderId}" id="orderId" name="orderId">
<input type="hidden" value="${order.orderPrice}" id="price" name="price">

<input type="hidden" id="orderFeedbackId" value="${wxPayData.orderFeedbackId}"/>
<input type="hidden" id="codeUrlStr" value="${wxPayData.codeUrl}"/>
<input type="hidden" id="price" value="${wxPayData.price}"/>
<input type="hidden" id="prepay_id" value="${wxPayData.prepay_id}"/>

<div class="addresspayment">
    <div class="payment-head">
        <p>
            <b class="head-one">核对支付信息</b>
            <b class="head-two">支付结果信息</b>
        </p>
    </div>

    <div class="table">
        <div class="order-number">
            <div class="number-one">
                <p>收货信息</p>
            </div>
            <div class="number-two">
                <input name="tid" value="${order.consigneeInfo.tid}" type="hidden">
                <p><span>收货人姓名 :</span><input type="text" name="consigneeName"
                                              value="${order.consigneeInfo.consigneeName}"></p>
                <p><span>收货人电话 :</span><input type="text" name="consigneePhone"
                                              value="${order.consigneeInfo.consigneePhone}"></p>
                <p><span>收货人地址 :</span><input type="text" name="consigneeAddress"
                                              value="${order.consigneeInfo.consigneeAddress}"></p>
            </div>
        </div>
        <div class="order-number">
            <div class="number-one">
                <p>订单号</p>
            </div>
            <div class="number-two">
                <p>${order.orderId}</p>
            </div>
        </div>

        <div class="order-information">
            <div class="information-one">
                <p>订单信息</p>
            </div>
            <div class="information-two">
                <c:forEach items="${order.orderItemList}" var="item" varStatus="index">
                    <p>${item.productEntity.productEntityName}</p>
                </c:forEach>

            </div>
        </div>

        <div class="order-form">
            <div class="form-one">支付方式</div>
            <div class="form-box">
                <b class="form-two">
                    <label>
                        <input type="radio" name="payMode" checked="checked" value="4"/>

                        <img src="/static/images/web/pay/wei.png" alt=""/>
                    </label>
                </b>

                <b class="form-three">
                    <label>
                        <input type="radio" name="payMode" value="3"/>
                        <img src="/static/images/web/pay/zhi.png" alt=""/>
                    </label>
                </b>
            </div>
        </div>

        <div class="order-foot">
            <div class="foot-one">
                <span>总价:</span>
                <span><fmt:formatNumber value="${order.orderPrice/100}" pattern="#,#0.00#"/> 元</span>
            </div>
        </div>
    </div>


    <div class="btn">
        <button id="pay">确认支付</button>
    </div>
</div>


<div class="occlusion_box"></div>
<div class="box_QR">
    <div id="weChatPay" class="QR_code">
        <img src="">
    </div>
    <div class="fork">
        <span>打开手机微信扫一扫确认支付</span>
        <img src="/static/images/web/pay/fork.png" alt="" class="fork_esc">
    </div>
</div>

</body>
</html>
<script type="text/javascript" src="/static/js/web/pay/pay.js"></script>